<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><title>个人账号信息</title>
<head th:replace="common/incHead :: incHead"></head>
<body class="ok-body-scroll console">
<div class="ok-body home">
    <div class="layui-row ">
        <div class="layui-col-md3">
            <div class="layui-card" layoutH="22">
                <div class="layui-card-header">
                    <div class="ok-card-title">分组信息</div>
                </div>
                <div class="ok-card-body">
                    <ul class="folder-list" style="padding: 0">
                        <li th:if="${!#lists.isEmpty(groupList)}" class="p-xxs" th:each="item:${groupList}">
                            <a href="javascript:" th:if="${accountGroup.id} == ${item.id}"><i class="layui-icon layui-icon-link"></i>
                                <selection class="text-info">[[${item.groupSort}]]:[[${item.groupName}]]</selection>
                            </a>
                            <a th:href="@{/biz/account/info(groupId=${item.id})}" th:if="${accountGroup.id} != ${item.id}"><i class="layui-icon layui-icon-link"></i>
                                <selection class="">[[${item.groupSort}]]:[[${item.groupName}]]</selection>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 p-l-sm">
            <div class="layui-card">
                <div class="ok-card-body">
                    <form class="layui-form layui-form-pane" lay-filter="pagerForm" id="pagerForm" action="/biz/account/info" method="get">
                        <input type="hidden" id="groupId" name="groupId" th:value="${groupId}"/>
                        <input type="hidden" id="pageNum" name="pageNum" value="1"/>
                        <input type="hidden" name="numPerPage" th:value="${page?.numPerPage}"/>
                        <input type="hidden" name="orderField" th:value="${orderField}"/>
                        <input type="hidden" name="orderDirection" th:value="${orderDirection}"/>
                        <div class="layui-row pa-condition">
                            <div class="layui-row">
                                <div th:replace="common/plugin :: pa-input-cond('accountTags','账号标签','layui-col-md3',${accountTags})"></div>
                                <div th:replace="common/plugin :: pa-input-cond('accountName','账号名称','layui-col-md3',${accountName})"></div>
                                <div th:replace="common/plugin :: pa-input-cond('accountCode','账号信息','layui-col-md3',${accountCode})"></div>
                                <button class="layui-btn layui-btn-sm layui-btn-primary pull-right m-l-xs" title="重置数据" type="reset"><i class="layui-icon layui-icon-return"></i>重置</button>
                                <button class="layui-btn layui-btn-sm layui-btn-normal pull-right btnPagerForm" title="重新检索"><i class="layui-icon layui-icon-search"></i>重新检索</button>
                            </div>
                        </div>
                    </form>
                    <div class="layui-row ljLayTableBox">
                        <table class="layui-hide" id="indexTable" lay-filter="indexTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/incBottom :: incBottom"></div>
<script type="text/javascript" src="/static/okadmin/lib/crypto-js/crypto-js.js"></script>
<!-- 初始化表格数据 -->
<script th:inline="javascript">
    /*<![CDATA[*/
    let indexData = [];
    let okPapperPageId = "BizAccountInfoIndex";
    let initSort = {
        field: [[${orderField}]] || 'id',
        type: [[${orderDirection}]] || 'desc'
    };
    /*[# th:each="item,itemStat:${records}"]*/
    indexData.push({
        id: [[${item.id}]],
        groupId: [[${item.groupId}]],
        accountTags: [[${item.accountTags}]],
        accountName: [[${item.accountName}]],
        accountCode: [[${item.accountCode}]],
        accountPass: [[${item.accountPass}]],
        accountDesc: [[${item.accountDesc}]],
        accountContent: [[${item.accountContent}]],
        dataStatus: [[${item.dataStatus}]],
        createTime: [[${@lj.date(item.createTime)}]]
    });
    /*[/]*/
    /*]]>*/
</script>
<script th:inline="none">
    function aesDecrypt(value, key) {
        key = CryptoJS.enc.Utf8.parse(key);
        let hexStr = CryptoJS.enc.Hex.parse(value);
        let encryptedBase64Str = CryptoJS.enc.Base64.stringify(hexStr);
        let decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return decryptedData.toString(CryptoJS.enc.Utf8);
    }

    layui.use(["jquery", "table", "okLayer", "okPapper", "okUtils"], function () {
        let table = layui.table;
        let okPapper = layui.okPapper;
        let $ = layui.jquery;
        let okUtils = layui.okUtils;
        let config = okUtils.local("okConfig") || okConfig || {};
        table.render({
            elem: '#indexTable',
            id: 'indexTable',
            height: 'full-88',
            page: false,
            limit: indexData.length,
            data: indexData,
            initSort: initSort,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: config.tableSize,
            cols: [[
                {type: "checkbox", fixed: "left"},
                {field: "id", title: "自增ID", fixed: "left", width: 90, sort: true, hide: okUtils.tableDefaultHide("自增ID")},
                {field: "accountTags", title: "账号标签", width: 150, sort: true, hide: okUtils.tableDefaultHide("账号标签")},
                {field: "accountName", title: "账号名称", width: 150, hide: okUtils.tableDefaultHide("账号名称")},
                {field: "accountCode", title: "账号信息", width: 200, hide: okUtils.tableDefaultHide("账号信息")},
                {field: "accountPass", title: "账号密码", minWidth: 250, hide: okUtils.tableDefaultHide("账号密码")},
                {field: "accountDesc", title: "账号备注", minWidth: 150, hide: okUtils.tableDefaultHide("账号备注")},
            ]],
            done: function (res, curr, count) {
            }
        });
        table.on('sort(indexTable)', function (obj) {
            $("input[name='orderField']").val(obj.field);
            $("input[name='orderDirection']").val(obj.type);
            $("#pagerForm").submit();
        });
        table.on('rowDouble(indexTable)', function (obj) {
            let encryptedData = obj.data.accountPass;
            layer.prompt({title: '输入密码口令，查看密码明文', formType: 3}, function (pass, index) {
                layer.close(index);
                let accountPass = aesDecrypt(encryptedData, okUtils.zeroFill(pass, 16));
                layer.msg(accountPass, {
                    time: 20000,
                    btn: ['知道了']
                });
            });
        });
        okPapper.init();
        okLoading.close($);
    })
</script>
<div th:replace="common/plugin :: pa-input-datatime('ts,te')"></div>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button th:if="${@lj.limit('BizAccountInfoAdd')>0}" class="layui-btn layui-btn-sm layui-btn-warm" title="个人账号信息新增" refTable="indexTable" th:ljUrl="|/biz/account/info/add?groupId=${groupId}|" target="ljOpenSubmit" ljWidth="800px" ljHeight="600px">
            <i class="layui-icon layui-icon-add-circle"></i>添加个人账号信息
        </button>
        <button th:if="${@lj.limit('BizAccountInfoEdit')>0}" class="layui-btn layui-btn-sm" title="个人账号信息编辑:{tid}" ljUrl="/biz/account/info/edit?id={tid}" ljWidth="800px" refTable="indexTable" target="ljOpenSubmit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
        <button th:if="${@lj.limit('BizAccountInfoDetail')>0}" class="layui-btn layui-btn-sm layui-btn-normal" title="个人账号信息详情:{tid}" ljUrl="/biz/account/info/detail?id={tid}" refTable="indexTable" ljWidth="800px" target="ljOpenCon"><i class="layui-icon layui-icon-form"></i>详情</button>
        <button th:if="${@lj.limit('BizAccountInfoDel')>0}" class="layui-btn layui-btn-sm layui-btn-danger" title="确认要删除该个人账号信息吗?" ljUrl="/biz/account/info/del?id={tid}" refTable="indexTable" target="ljAjaxTodo"><i class="layui-icon layui-icon-delete"></i>删除</button>
        <button th:if="${@lj.limit('BizAccountInfoEdit')>0}" class="layui-btn layui-btn-sm layui-btn-red" title="个人账号密码重置:{tid}" ljUrl="/biz/account/info/pass?id={tid}" ljWidth="400px" ljHeight="200px" refTable="indexTable" target="ljOpenSubmit"><i class="layui-icon layui-icon-edit"></i>重置密码</button>
    </div>
</script>
<!-- DataStatus枚举模板 -->
<div th:replace="common/enum :: pa_enum_DataStatus"></div>
</body>
</html>